<template>
    <div class="container">
        <div class="product-edit">
            <header>
               <router-link to="/">首页 / </router-link>
                <router-link to="/loan/product">借贷需求 / </router-link>
                <router-link :to="{ path: '/loan/product'}">{{detail.productName?detail.productName:'--'}}/ </router-link>
                基础信息
            </header>
            <div v-if="messageList.length > 0" class="focus-pointer mb30">
                <div class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="detail-display">
                <div class="flex-box-align head-sec">
                    <div class="flex">发布产品</div>
                    <div></div>
                    <!--<el-button type="primary" style="background-color: #ED7018;border-color: #ED7018;" @click="handleClickCommit">提交</el-button>-->
                </div>

                <el-form :model="params" :rules="rules" ref="params" style="margin-top: 30px;">
                    <div class="flex-box-justify">
                        <div class="flex">
                            <el-form-item label="产品名称" prop="productName">
                                <el-input v-model="params.productName" placeholder="请输入内容" style="width: 200px"></el-input>
                            </el-form-item>
                            <el-form-item class="loan-item" label="贷款额度">
                                <el-col :span="7">
                                    <el-form-item prop="loanFundMin">
                                        <el-input v-model.number="params.loanFundMin" placeholder="请输入内容"></el-input><span>万元</span>
                                    </el-form-item>
                                </el-col>
                                <el-col class="line" :span="1" style="text-align: center">~</el-col>
                                <el-col :span="7">
                                    <el-form-item prop="loanFundMax">
                                        <el-input v-model.number="params.loanFundMax" placeholder="请输入内容"></el-input><span>万元</span>
                                    </el-form-item>
                                </el-col>
                                 
                                <!--<el-select v-model="params.singleInvestFund" placeholder="请选择" style="width: 150px">-->
                                    <!--<el-option-->
                                            <!--v-for="item in singleInvestMoneyList"-->
                                            <!--:key="item.key"-->
                                            <!--:label="item.value"-->
                                            <!--:value="item.key">-->
                                    <!--</el-option>-->
                                <!--</el-select>-->
                            </el-form-item>
                            <!--<el-form-item label="总投资金额" prop="totalInvestFund">-->
                                <!--<el-input v-model="params.totalInvestFund" placeholder="请输入内容" style="width: 150px"></el-input>-->
                                <!--<el-select v-model="params.fundUnit" placeholder="请选择" style="width: 80px;margin-left: 10px;">-->
                                    <!--<el-option-->
                                            <!--v-for="item in unitList"-->
                                            <!--:key="item.key"-->
                                            <!--:label="item.value"-->
                                            <!--:value="item.key">-->
                                    <!--</el-option>-->
                                <!--</el-select>-->
                            <!--</el-form-item>-->
                            <el-form-item label="贷款最高期限" prop="investYear">
                                <el-select filterable v-model="params.investYear" placeholder="请选择" style="width: 150px">
                                    <el-option
                                            v-for="item in investList"
                                            :key="item.key"
                                            :label="item.value"
                                            :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="贷款年化利率" prop="minReportRate">
                                <el-input v-model.number="params.minReportRate" placeholder="请输入内容" style="width: 150px"></el-input>%/年
                            </el-form-item>
                            <el-form-item label="上传图片" prop="photoIds" class="flex-box-container">
                                <ul class="upload-list flex-box-container">
                                    <li v-for="(item, index) in detail.photoFiles" :key="index">
                                        <img :src="item.fileUrl" alt="">
                                        <div class="btn-delete" @click="handleClickDelPic(index)">
                                            <img src="../../images/delete.png" alt="">
                                        </div>
                                    </li>
                                </ul>
                                <el-upload
                                        :action="uploadUrl"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :on-success="handleUploadSuccess"
                                        :file-list="fileList1"
                                        :limit="6">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="uploadDialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                        </div>
                        <div class="flex">
                            <el-form-item label="资金主体" prop="fundBodys">
                                <el-checkbox-group v-model="checkList" @change="handleChangeCheckbox">
                                    <el-checkbox  :label="item.key" :key="index" v-for="(item, index) in fundBodyList">{{item.value}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="贷款适用地区" prop="areaList">
                                <div class="flex-box-align">
                                    <v-distpicker :province="financeProvince" :city="financeCity" :area="financeDistrict"
                                                  @province="selectFinanceProvince"
                                                  @city="selectFinanceCity"
                                                  @area="selectFinanceArea"
                                    ></v-distpicker>
                                    <span style="color: #999999; font-size: 10px; position: absolute; bottom: -30px;">(不选择特定省市则为全国适用)</span>
                                    <el-button type="primary" style="margin-left: 20px;background-color: #ED7018;border-color: #ED7018;" @click="handleAddArea">添加</el-button>
                                </div>
                                <div>
                                    <el-tag
                                            v-for="(item, index) in params.areaList"
                                            :key="index"
                                            closable
                                            :disable-transitions="false"
                                            type="success"
                                            @close="handleCloseAreaTag(item, index)"
                                    >
                                        {{item.value}}
                                    </el-tag>
                                </div>
                            </el-form-item>
                            <el-form-item label="申请者最低成立年限" prop="applyMixYear">
                                <el-input  v-model.number="params.applyMixYear" placeholder="请输入内容" style="width: 200px"></el-input><span  style="margin-left:10px;">年</span> 
                            </el-form-item>
                            <el-form-item label="申请者盈利要求" prop="applyProfit">
                                <el-radio v-model="params.applyProfit" label="y">需盈利</el-radio>
                                <el-radio v-model="params.applyProfit" label="n">无要求</el-radio>
                            </el-form-item>
                            <el-form-item label="申请者最低营业收入要求" prop="applyMixIncome">
                                <el-input v-model.number="params.applyMixIncome" placeholder="请输入内容" style="width: 200px"></el-input><span  style="margin-left:10px;"></span> 
                            </el-form-item>
                            <!-- <el-form-item label="投资方式" prop="investType">
                                <el-select v-model="params.investType" placeholder="请选择" style="width: 150px">
                                    <el-option
                                            v-for="item in investTypeList"
                                            :key="item.key"
                                            :label="item.value"
                                            :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="投资行业" prop="firstIndustry">
                                <el-cascader
                                        :options="firstIndustryList"
                                        v-model="selectedOptions"
                                        :props="props"
                                        @change="handleChange">
                                </el-cascader>
                            </el-form-item> -->
                            <!-- <el-form-item label="最低融资阶段要求" prop="financeLevel">
                                <el-select v-model="params.financeLevel" placeholder="请选择">
                                    <el-option
                                            v-for="item in financeLevelList"
                                            :key="item.key"
                                            :label="item.value"
                                            :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="资方" prop="bankDatas" style="display: flex">
                                <div>
                                    <el-cascader
                                            :options="bankList"
                                            v-model="bankSelectList"
                                            @change="handleChangeBank"
                                            :props="propsBank"
                                    >
                                    </el-cascader>
                                </div>
                                <div>
                                    <el-tag
                                            v-for="(item, index) in bankTagList"
                                            :key="item.subBankId"
                                            closable
                                            :disable-transitions="false"
                                            type="success"
                                            @close="handleCloseTag(item, index)"
                                    >
                                        {{item.bankName}}
                                    </el-tag>
                                </div>
                                <!--<span class="fund">-->
                                    <!--<ul>-->
                                        <!--<li v-for="(item, index) in bankList" :key="index">-->
                                            <!--<div>{{item.bankName}}</div>-->
                                            <!--<el-checkbox-group v-model="fund1List" @change="handleChangeFund1Checkbox">-->
                                                <!--<el-checkbox :key="index1" :label="item1.id" v-for="(item1, index1) in item.subBankDatas">-->
                                                    <!--{{item1.bankName}}-->
                                                <!--</el-checkbox>-->
                                            <!--</el-checkbox-group>-->
                                        <!--</li>-->
                                    <!--</ul>-->
                                <!--</span>-->
                            </el-form-item>

                        </div>
                    </div>
                    <div class="flex-box-align">
                        <el-form-item label="产品整体说明" prop="memo" style="display: flex">
                            <span>
                                <bg-editor
                                    :minHeight="300"
                                    :uploadUrl="uploadUrl"
                                    :content="params.memo"
                                    @editorData='editorInfo'>
                                </bg-editor>
                            </span>
                        </el-form-item>
                    </div>
                </el-form>
                <div style="text-align: right">
                    <el-button type="primary" style="background-color: #ED7018;border-color: #ED7018;" @click="handleClickCommit">提交</el-button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import {parseUrlParams} from "../../util";
    let CONSTANT = require('../../constant/constant.js'),
        common = require('../../common.js');
    import VDistpicker from 'v-distpicker';
    import $ from 'jquery';
    export default {
        data() {
            var validateNum =  (rule, value, callback) => {
                if (isNaN(value)){ return callback(new Error('请输入数字')); }
                var reg= /^(-?\d+)(\.\d{1,2})?$/
                if (!reg.test(value)){ return callback(new Error('请保留两位小数')); }
                callback();
            };

            var validateNumOne = (rule, value, callback) => {
                if (isNaN(value)){ return callback(new Error('请输入数字')); }
                var reg= /^(\d+.\d{1,1}|\d+)$/
                if (!reg.test(value)){ return callback(new Error('请保留一位小数')); }
                callback();
            };
            return {
                formLabelWidth:'150px',
                rules: {
                    productName:[
                        {required: true, message: '请输入产品名称', trigger: 'change'  }
                    ],
                    loanFundMin:[
                        {required: true, message: '请填写贷款额度', trigger: 'change'  },
                        { type: 'number', message: '贷款额度必须为数字值'},
                        {  validator: validateNum, trigger: 'blur' }
                    ],
                    loanFundMax:[
                        {required: true, message: '请填写贷款额度', trigger: 'change'  },
                        { type: 'number', message: '贷款额度必须为数字值'},
                        {  validator: validateNum, trigger: 'blur' }
                    ],
                    investYear:[
                        {required: true, message: '请选择贷款最高期限', trigger: 'change'  }
                    ],
                    minReportRate: [
                        {required: true, message: '请输入贷款年化利率', trigger: 'change'  },
                        { type: 'number', message: '贷款年化利率必须为数字值'},
                        {  validator: validateNum, trigger: 'blur' }
                    ],
                    fundBodys: [
                        {required: true, message: '请选择资金主体', trigger: 'blur'  }
                    ],
                    bankDatas: [
                        {required: true, message: '请选择资方', trigger: 'change'  }
                    ],
                    photosId: [
                        {required: true, message: '请上传图片', trigger: 'change'  }
                    ],
                    memo: [
                        {required: true, message: '请填写产品整体说明', trigger: 'change'  }
                    ],
                    areaList: [
                        // {required: true, message: '请选择贷款适用地区', trigger: 'change'  }
                    ],
                    applyMixYear: [
                        {required: true, message: '请输入申请者最低成立年限', trigger: 'change'},
                        { type: 'number', message: '申请者最低成立年限必须为数字值'},
                        {  validator: validateNumOne, trigger: 'blur' }
                    ],
                    applyProfit: [
                        {required: true, message: '请选择申请者盈利要求', trigger: 'change'  }
                    ],
                    applyMixIncome: [
                        {required: true, message: '申请者最低营业收入要求', trigger: 'change'  },
                        { type: 'number', message: '申请者最低营业收入要求必须为数字值'},
                        {  validator: validateNum, trigger: 'blur' }
                    ],
                },
                financeProvince: "",
                financeCity: "",
                financeDistrict: "",
                singleInvestMoneyList: [],
                firstIndustryList: [],
                bankList: [],
                investList: [],
                fundBodyList: [],
                investTypeList: [],
                financeLevelList: [],
                unitList: [
                    {
                        key: "w",
                        value:"万"
                    },
                    {
                        key: "y",
                        value: "亿"
                    }
                ],
                params: {
                    bankDatas: [],
                    financeLevel: "100017000", //最低融资阶段要求
                    firstIndustry: "",
                    fundBodys: "", //6
                    fundUnit: "w",
                    investType: "100024001", //7
                    investYear: "",//4
                    loanFundMin: "",
                    loanFundMax: "",
                    memo: "",
                    minReportRate: null, //5
                    photoIds: "",
                    productName: "", //1
                    secondIndustry: "",
//                    singleInvestFund: "",//2
                    thirdIndustry: "",
                    totalInvestFund: null,//3
                    id: null,
                    applyMixIncome: null,
                    applyMixYear: "",
                    applyProfit: "",
                    areaDatas: [],
                    areaList: [],
                },
                detail: {
                    photoFiles: []
                },
                props: {
                    label: "value",
                    value: 'key',
                    children: 'childs'
                },
                propsBank: {
                    label: "bankName",
                    value: 'id',
                    children: 'subBankDatas'
                },
                selectedBanks: [],
                selectedOptions: [],
                uploadUrl: "",
                uploadDialogVisible: false,
                dialogImageUrl: "",
                fileList1: [],
                fileList: [],
                checkList: [],
                fundList: [],
                fund1List: [],
                bankId: "",
                bankSelectList: [],
                bankTagList: [],
                num: 0,
                messageList: [],
                financingCity: "",
                financingProvince: "",
                financingDistrict: ""
            }
        },
        components:{
            'bg-editor':()=>import('../common/bg-editor.vue'),
            VDistpicker
        },
        mounted(){
            this.getMessage()
            setInterval( () => {
                this.getMessage()
            }, 120000)
            this.uploadUrl = CONSTANT.URL.SYS.ADMINUPLOAD + "?sessionId="+common.getCookie("sessionId");
            if (parseUrlParams("id")) {
                this.params.id = parseUrlParams("id");
                this.getDetail()
            }
            this.uploadUrl = CONSTANT.URL.SYS.ADMINUPLOAD + "?sessionId="+common.getCookie("sessionId");
            this.getDictionary("single_invest_fund", (data) => {
                this.singleInvestMoneyList = data.data.bussData
            })
            this.getDictionary("first_industry", (data) => {
                this.firstIndustryList = data.data.bussData
            })
            this.getBankUserList()
            this.getDictionary("invest_year", (data) => {
                this.investList = data.data.bussData
            })
            this.getDictionary("fund_body", (data) => {
                this.fundBodyList = data.data.bussData
            })
            this.getDictionary("invest_type", (data) => {
                this.investTypeList = data.data.bussData
            })
            this.getDictionary("finance_level", (data) => {
                this.financeLevelList = data.data.bussData
            })
        },
        methods:{
            getMessage() {
                let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
                common.requestAjax(url, {}, {}, (data) => {
                    if(data.status == 200) {
                        this.messageList = data.data.bussData;
                        this.showMarquee(this.num)
                    }
                })
            },
            getDictionary(params, callback) {
                let url = CONSTANT.URL.SYS.LOADDICTIONARY;
                common.requestAjax(url, {codeType: params}, {}, callback);
            },
            getUserType(params, secondParams, callback) {
                let url = CONSTANT.URL.COMPANY.USERTYPE;
                common.requestAjax(url, JSON.stringify({userType: params, capitalType: secondParams}), {}, callback);
            },
            getBankUserList() {
                let url = CONSTANT.URL.COMPANY.BANKUSERTREE;
                common.requestAjax(url, {}, {}, (data) => {
                    this.bankList = data.data.bussData;
                    this.bankList.map( (item, index) => {
                        if (item.subBankDatas.length == 0) {
                            this.bankList[index].subBankDatas = [{id: "sub_"+index,bankName: "全部"}]
                        }
                    })
                })
            },
            getDetail() {
                let url = CONSTANT.URL.FINANCE.PRODUCTDETAIL;
                common.requestAjax(url, JSON.stringify({}), {id: parseUrlParams("id")}, (data) => {
                    if (data.status == 200) {
                        this.detail = data.data.bussData;
                        this.financeProvince = this.detail.financingProvinceName;
                        this.financeCity = this.detail.financingCityName
                        if(data.data.bussData.fundBodyDatas && data.data.bussData.fundBodyDatas.length) {
                            this.detail.fundBodyDatas.map( item => {
                                this.checkList.push(item.fundBody)
                            })
                        }
                        this.selectedOptions = [this.detail.firstIndustry, this.detail.secondIndustry, this.detail.thirdIndustry];
                        if (this.detail.bankDatas.length) {
                            this.detail.bankDatas.map( item => {
                                this.fund1List.push(item.secondBankId)
                            })
                        }
                        if (this.detail.areaDatas.length) {
                            this.detail.areaDatas.map( (item, index) => {
                                let code = "", value = "";
                                if (item.financingProvinceCode) {
                                    code = item.financingProvinceCode
                                }
                                if (item.financingCityCode) {
                                    code = item.financingProvinceCode + "," + item.financingCityCode
                                }
                                if (item.financingDistrictCode) {
                                    code = item.financingProvinceCode + "," + item.financingCityCode + "," + item.financingDistrictCode
                                }
                                if (item.financingProvinceName) {
                                    value = item.financingProvinceName
                                }
                                if (item.financingCityName) {
                                    value = item.financingProvinceName + item.financingCityName
                                }
                                if (item.financingDistrictName) {
                                    value = item.financingProvinceName + item.financingCityName + item.financingDistrictName
                                }
                                this.params.areaDatas.push({
                                    financingCityCode: item.financingCityCode,
                                    financingProvinceCode: item.financingProvinceCode,
                                    financingDistrictCode: item.financingDistrictCode
                                })
                                this.params.areaList.push({
                                    code: code,
                                    value: value
                                })
                            })
                        }

                        this.params = {
                            bankDatas: [],
                            financeLevel: this.detail.financeLevel, //最低融资阶段要求
                            firstIndustry: this.detail.firstIndustry,
                            fundUnit: this.detail.fundUnit,
                            investType: this.detail.investType, //7
                            investYear: this.detail.investYear,
                            memo: this.detail.memo,
                            minReportRate: this.detail.minReportRate, //5
                            photoIds: this.detail.photoIds,
                            productName: this.detail.productName, //1
                            secondIndustry: this.detail.secondIndustry,
                            loanFundMin: this.detail.loanFundMin,
                            loanFundMax: this.detail.loanFundMax,
//                            singleInvestFund: this.detail.singleInvestFund,//2
                            thirdIndustry: this.detail.thirdIndustry,
                            totalInvestFund: this.detail.totalInvestFund,//3
                            id: this.detail.id,
                            applyMixIncome: this.detail.applyMixIncome,
                            applyMixYear: this.detail.applyMixYear,
                            applyProfit: this.detail.applyProfit,
                            areaDatas: this.params.areaDatas,
                            areaList: this.params.areaList
                        }

                        let arr = [];
                        this.detail.fundBodyDatas.map( item => {
                            arr.push(item.fundBody)
                        })

                        this.detail.bankDatas.map( item => {
                            this.params.bankDatas.push({
                                capitalType: item.capitalType,
                                firstBankId: item.firstBankId,
                                secondBankId: item.secondBankId,
                                id: item.id,
                                productId: item.productId
                            })
                            this.bankTagList.push({
                                firstBankId: item.firstBankId,
                                secondBankId: item.secondBankId,
                                bankName: item.secondBankId == 0 ? item.baseDTO.coreData.companyName : item.subBankData.bankName,  //item.subBankData.bankName                              bankName: item.subBankData.bankName
                            })
                        })

                        this.params.fundBodys = arr.join(",")
                    }
                })
            },
            handleClickCommit() {
                this.$refs["params"].validate((valid) => {
                    if (valid) {
                        let url = CONSTANT.URL.FINANCE.SAVEPRODUCT;
                        let arr = []
                        this.params.areaList.map( (item, index) => {
                            let split = item.code.split(",")
                            arr.push({
                                financingProvinceCode: split[0],
                                financingCityCode: split[1] ? split[1] : "",
                                financingDistrictCode: split[2] ? split[2] : "",
                            })
                        })
                        this.params.areaDatas = arr
                        delete this.params.areaList;
                        if (JSON.parse(this.params.loanFundMin) > JSON.parse(this.params.loanFundMax)) {
                            this.$message({
                                message: "请填写正确的贷款额度",
                                type: 'warning'
                            });
                            return false;
                        }
                        common.requestAjax(url, JSON.stringify(this.params), {}, (data) => {
                            if(data.status == 200) {
                                this.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                this.$router.replace('/loan/product')
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            handleClickAdd() {
                this.licenseData.contactDatas.push({
                    age: "",
                    trueName: "",
                    position: "",
                    introduction: "",
                })
            },
            handleChange(val) {
                val.map( (item, index)=> {
                    if (index == 0) {
                        this.params.firstIndustry = item
                    }
                    if (index == 1) {
                        this.params.secondIndustry = item
                    }
                    if (index == 2) {
                        this.params.thirdIndustry = item
                    }
                })
            },
            editorInfo(val){
                this.params.memo = val;
            },
            handleRemove(file, fileList) {
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.uploadDialogVisible = true;
            },
            handleUploadSuccess(res, file, fileList) {
                let arr = []
//                fileList.map( (item, index) => {
//                    arr.push(item.response.data.bussData.fileId)
//                })
                this.detail.photoFiles.push(res.data.bussData)
                this.detail.photoFiles.map( item => {
                    arr.push(item.fileId)
                })
                this.params.photoIds = arr.join(",")
            },
            handleChangeCheckbox(val) {
                this.params.fundBodys = this.checkList.join(",")
            },
            handleChangeFund1Checkbox(val) {
                let arr = []
                val.map( (item, index) => {
                    let filter = [];
                    this.bankList.map( (item1, index1) => {
                        filter = item1.subBankDatas.filter( item2 => {
                            return item2.id == item;
                        })
                        if (filter.length && parseUrlParams("id")) {
                            arr.push({
                                capitalType: item1.capitalType,
                                firstBankId: item1.id,
                                secondBankId: filter[0].id,
                                productId: parseUrlParams("id"),
                                id: parseUrlParams("id"),
                            })
                        } else if (filter.length && !parseUrlParams("id")) {
                            arr.push({
                                capitalType: item1.capitalType,
                                firstBankId: item1.id,
                                secondBankId: filter[0].id,
                            })
                        }
                    })
                })
                this.params.bankDatas = arr
            },
            handleClickDelPic(index) {
                this.detail.photoFiles.splice(index, 1)
                let arr = [];
                this.detail.photoFiles.map( item => {
                    arr.push(item.fileId)
                })
                this.params.photoIds = arr.join(",")
            },
            handleChangeBank(val) {
                let filter = this.bankList.filter( item => {
                    return item.id == val[0]
                })
                let filter1 = filter[0].subBankDatas.filter( item => {
                    return item.id == val[1]
                })

                let filter2 = this.bankTagList.filter( item => {
                    return item.secondBankId == val[1]
                })

                let filter3 = this.bankTagList.filter( item => {
                    return item.firstBankId == val[0]
                })

                if (filter3.length && filter2.length) {
                    this.$message({
                        message: '请勿重复选择',
                        type: 'warning'
                    });
                    return false;
                }

                this.bankTagList.push({
                    firstBankId: filter[0].id,
                    secondBankId: filter1[0].id,
                    bankName: filter1[0].bankName
                })

                let item = {
                    capitalType: filter[0].capitalType,
                    firstBankId: filter[0].id,
                    secondBankId: filter1[0].id,
                }
                if (parseUrlParams("id")) {
                    item = Object.assign(item, {productId: parseUrlParams("id")})
                    this.params.bankDatas.push(item)
                } else {
                    this.params.bankDatas.push(item)
                }

            },
            handleCloseTag(val, index) {
                let filter = this.params.bankDatas.filter( item => {
                    return item.secondBankId != val.secondBankId
                })

                this.params.bankDatas = filter
                this.bankTagList.splice(index, 1)
            },
            selectFinanceProvince(val) {
                this.financeProvince = ""
                this.financingProvince = ""
                if (!val.code) {
                    return false;
                }
                this.financeProvince = val.value
                this.financingProvince = val
            },
            selectFinanceCity(val) {
                this.financeCity = ""
                this.financingCity = ""
                if (!val.code) {
                    return false;
                }
                this.financeCity = val.value
                this.financingCity = val
            },
            selectFinanceArea(val) {
                this.financeDistrict = ""
                this.financingDistrict = ""
                if (!val.code) {
                    return false;
                }
                this.financeDistrict = val.value
                this.financingDistrict = val
            },
            handleAddArea() {
                // if (!this.financingProvince) {
                //     this.$message({
                //         message: "请选择地区",
                //         type: "warning"
                //     })
                //     return false;
                // }
                if (this.params.areaList.find(i => i.value == '全国')) {
                    return this.$message.warning('贷款试用范围已涵盖全国')
                }
                if (!this.financingProvince) {
                    this.params.areaList = []
                }
                let province = "", city = "", district = "", item = {},
                    pCode = "", cCode = "", dCode = "", code = ""
                if (this.financingProvince) {
                    province = this.financingProvince.value;
                    pCode = this.financingProvince.code;
                } else {
                    return this.params.areaList.push({value: '全国', code: ''})
                }

                if (this.financingCity) {
                    city = this.financingCity.value
                    cCode = this.financingCity.code
                }
                if (this.financingDistrict) {
                    district = this.financingDistrict.value
                    dCode = this.financingDistrict.code
                }
                if (pCode) {
                    code = pCode
                }

                if (cCode) {
                    code = pCode+","+cCode
                }

                if (dCode) {
                    code = pCode+","+cCode+","+dCode
                }

                item = {value: province + city + district, code: code};
                this.params.areaList.push(item)
                this.financingProvince = "";
                this.financingCity = "";
                this.financingDistrict = '';
                this.financeProvince = "";
                this.financeCity = "";
                this.financeDistrict = ""

            },
            handleCloseAreaTag(item, index) {
                this.params.areaList.splice(index, 1);
                this.params.areaDatas.splice(index, 1);
            },
            showMarquee:function (num) {
                if (!this.messageList[0]) return
                this.messageList.push(this.messageList[0]);
                var max = this.messageList.length;
                var that = this;
                let marqueetimer = setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    }
</script>

<style lang="scss">
.distpicker-address-wrapper>select {
    width: 80px;
}
    .message {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;/*关键样式*/
        overflow: hidden;
    }
    .marquee_list{
        display: block;
        position: absolute;
        top:0;
        left: 0;
    }
    .marquee_top{transition: top 0.5s ;}/*关键样式*/
    .marquee_list li{
        height: 30px;/*关键样式*/
        line-height: 30px;/*关键样式*/
        font-size: 14px;
        padding-left: 20px;
        background-color: #fff;
        a {
            color: #333;
        }
    }
    .container {
        .mb30 {
            margin-bottom: 30px;
        }
        .whiteSpace {
            white-space: nowrap;
        }
        .product-edit {
            .loan-item{
                .el-input{
                    width: 75%;
                    margin-right: 3%;
                }
            }
            .el-form-item__label {
                white-space: nowrap;
            }
            .el-tag {
                margin-right: 10px;
            }
            header {
                margin: 19px 0;
                font-size: 14px;
                color: #333;
                a {
                    color: #999;
                }
            }
            .focus-pointer {
                font-size: 14px;
                height: 70px;
                line-height: 70px;
                background-color: #fff;
                padding-left: 18px;
                white-space: nowrap;
            }
            .detail-display {
                background-color: #fff;
                padding: 23px;
                .head-sec {
                    padding-bottom: 20px;
                    border-bottom: 1px solid #e1e1e1;
                }
                .el-radio__input.is-checked .el-radio__inner {
                    border-color: #ED7018;
                    background: #ED7018;
                }
                .el-radio__input.is-checked+.el-radio__label {
                    color: #333;
                }
            }
            .top-manager {
                margin-bottom: 20px;
                span {
                    width: 80px;
                    display: inline-block;
                }
            }
            .el-upload-list.el-upload-list--picture-card {
                display: none;
            }
            .upload-list {
                margin-bottom:0;
                li {
                    width: 148px;
                    height: 148px;
                    margin-right: 20px;
                    margin-bottom: 20px;
                    position: relative;
                    &:hover {
                        div {
                            display: block;
                        }
                    }
                    .btn-delete {
                        cursor: pointer;
                        width: 100%;
                        height: 100%;
                        display: none;
                        position: absolute;
                        background: rgba(0, 0, 0, 0.3);
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        img {
                            vertical-align: middle;
                            width: 32px;
                            height: 32px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }
                    img {
                        width: 100%;
                        height: 100%;
                        vertical-align: middle;
                    }
                }
            }
            .fund {
                .el-checkbox {
                    display: inline-block;
                    /*margin-right: 20px;*/
                    /*margin-top: 10px;*/
                    /*margin-bottom: 20px;*/
                }
                .el-checkbox__input {
                    margin-top: 3px;
                }
            }
        }
        .avatar-uploader .el-upload {
            /*border: 1px dashed #d9d9d9;*/
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            /*height: 178px;*/
            display: block;
        }
    }
</style>
